<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>24 MARS</title>
    <style>
        .logo{
            width: 140px;
        }
        .in{
            width: 400px;
            height: 20px;
            float: right;
            margin-right: 230px;
            margin-top: 1.80rem;
        }
        .headers{
            z-index: 1001;
            /*固定定位*/
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 5rem;
            background: rgba(255, 255, 255, 1);
        }
        .enter{/*按钮参数*/
            float: right;
            /*设置按钮的位置*/
            margin-right: 80px;
            margin-top: 1.25rem;
            width: 5rem;
            height: 2.5rem;
            line-height: 2.5rem;
            font-size: 1rem;
            border-radius: 1rem;
            display: block;
            background: #FBB932;
            text-align: center;
            color: #333333;
            cursor: pointer;
            font: normal 400 16px 'Microsoft Yahei',Arial;
            transition-duration: 0.15s
        }
        .enter:hover{
            transform: scale(1.1);/*缩放1.1倍*/
        }
        div>h1{
            float: right;
            /*设置文字的位置*/
            margin-right: 0.5px;
            margin-top: 1.25rem;
            /*文字的位置*/
            width: 15rem;
            height: 2.5rem;
            line-height: 2.5rem;
            font-size: 0.5rem;
        }
        div{
            display: block;
            background: url(ssc.png) no-repeat center 0px;
        }
        body{
            font: normal 400 16px 'Microsoft Yahei',Arial;
        }
        li{
            float: left;
            margin-right: 90px;
            list-style-type:none;
            overflow: hidden;/*由于ul的所有元素全部浮动，自动高度为0，后面的元素会顶上来，如果顶上来的内容又文本还会被挤到侧面*/
            padding: 0;

        }
        span{
            font-size: 16px;
            color: gray;
            position:relative;
            bottom: 5px;
        }
        .c1{
            width: 50px;
            height: 60px;
            background-size: 50px 60px;/*图片尺寸*/
            background-position: 90% 90%;/*背景位置*/
            background-repeat: no-repeat;/*禁止重复*/
            overflow: hidden;/*解决粘连问题*/
        }
        .img1{
            width: 300px;
            border-width : 10px;
            border-color : black;
           border-style:double;
         border-radius : 20%;
        }
    </style>
    <link rel="stylesheet" href="myhome.css">
</head>
<body>
<div class="headers"><img src="" alt="">
    <img class="logo" src="logo.png" alt="">
    <input class="enter" type="button" value="登录">
    <h1>登录或注册即可享受更多优秀的壁纸哦-></h1>
    <input class="in" type="text" placeholder="欢迎来到24MARS,在此处输入关键字挑选您心爱的壁纸吧~">
</div>
<div class="imgBox">
    <!-- alt：图片路径失败时替换显示内容 -->
    <img class="img-slide img" src="f.png" alt="旅途">
    <img class="img-slide img" src="a.png" alt="太太">
    <img class="img-slide img" src="c.png" alt="鬼刀公主">
    <img class="img-slide img" src="d.png" alt="停留">
    <img class="img-slide img" src="e.png" alt="垃圾兔">
</div>
<div>
    <ul>
        <li>
            <img class="c1" src="sss.jpg" alt="">
        </li>
        <li>
            <a href=""><span>精选</span></a>
        </li>
        <li>
            <a href=""><span>风景</span></a>
        </li>
        <li>
            <a href=""><span>动漫</span></a>
        </li>
        <li>
            <a href=""><span>明星</span></a>
        </li>
        <li>
            <a href=""><span>美女</span></a>
        </li>
        <li>
            <a href=""><span>科幻</span></a>
        </li>
        <li>
            <a href=""><span>汽车</span></a>
        </li>
        <li>
            <a href=""><span>游戏</span></a>
        </li>
        <li>
            <a href=""><span>萌宠</span></a>
        </li>
        <li>
            <a href=""><span>互动</span></a>
        </li>
    </ul>
</div>
<div>
    <ul>
        <li><img class="img1" src="a.png" alt=""></li>
        <li><img class="img1" src="xc.png" alt=""></li>
        <li><img class="img1" src="oio.png" alt=""></li>
    </ul>
</div>
<!--<center><a href="#top">回到顶部</a></center>
如果您喜欢我们的网站，请您收藏我们-->

</body>
<script type="text/javascript">
    // index：索引， len：长度
    var index = 0, len;
    // 类似获取一个元素数组
    var imgBox = document.getElementsByClassName("img-slide");
    len = imgBox.length;
    imgBox[index].style.display = 'block';
    // 逻辑控制函数
    function slideShow() {
        index ++;
        // 防止数组溢出
        if(index >= len) index = 0;
        // 遍历每一个元素
        for(var i=0; i<len; i++) {
            imgBox[i].style.display = 'none';
        }
        // 每次只有一张图片显示
        imgBox[index].style.display = 'block';
    }

    // 定时器，间隔3s切换图片
    setInterval(slideShow, 3000);

</script>
</html>